<html !doctype>
<head>
    <title>FontSizeTester</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        .px10 {
            width: "100%";
            height: 10px;
            background-color: rgb(231, 171, 171);
            font-size: 10px;
        }
        .px20 {
            width: "100%";
            height: 20px;
            background-color: red;
            font-size: 20px;
        }
        .em2 {
            width: "100%";
            height: 2rem;
            background-color: rgb(120, 204, 123);
            font-size: 2rem;
        }
        .rem2 {
            width: "100%";
            height: 2rem;
            background-color: rgb(167, 157, 214);
            font-size: 2rem;
        }
        .cm1 {
            width: "100%";
            height: 1cm;
            background-color: rgb(178, 250, 225);
            font-size: 1cm;
        }
    </style>
</head>
<body>
    <div class="px10">10pxHeight and 10pxFont</div>
    <div class="px20">20pxHeight and 20pxFont</div>
    <div class="em2">2em</div>
    <div class="rem2">2rem</div>
    <div class="cm1">1cm</div>
</body>
</html>